﻿<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    DetalleImagenes
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">



<link href="<%: Url.Content("~/Content/WebPageStyleSheet.css") %>" rel="stylesheet" type="text/css" />
<link href="<%: Url.Content("~/Content/style.css") %>" rel="stylesheet" type="text/css" />
<link href="<%: Url.Content("~/Content/jPages.css") %>" rel="stylesheet" type="text/css" />
<link href="<%: Url.Content("~/Content/animate.css") %>" rel="stylesheet" type="text/css" />
<link href="<%: Url.Content("~/Content/github.css") %>" rel="stylesheet" type="text/css" />
<script src="<%: Url.Content("~/Scripts/jquery-1.8.2.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/highlight.pack.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/tabifier.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/js.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jPages.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/WebPageImagen.js") %>" type="text/javascript"></script>
<!DOCTYPE html>
<html>
<head>

  <title>gallery</title>

  <script type="text/javascript">
      $(function () {

          /* initiate plugin */
          $("div.holder").jPages({
              containerID: "thumbs",
              perPage: 5,
              previous: ".prev",
              next: ".next",
              links: "blank",
              direction: "auto",
              animation: "fadeInUp"
          });

          $("ul#thumbs li").click(function () {
              $(this).addClass("selected")
      .siblings()
      .removeClass("selected");

              var img = $(this).children().clone().addClass("animated fadeInDown");
              $("div#img").html(img);

          });

      });
  </script>

  <style type="text/css">
  ul#thumbs { list-style: none; margin: 0px; padding:0px; margin-top: 10px; }
  ul#thumbs li { float: left; margin-right: 10px; cursor:pointer; }
  ul#thumbs li img { height: 75px; vertical-align: top; }
  ul#thumbs li.selected { outline: 3px solid #FF4242; }

  div#img img { width: 600px; height: 400px; }

  div#btns{ position:relative; width: 600px; }
  .prev, .next { width:29px; height:29px; position: absolute; top: -95px; cursor: pointer; }
  .prev { background-image: url('img/back.gif'); left: -40px; }
  .next { background-image: url('img/next.gif'); right: -40px; }

  .jp-disabled{ display:none; }
  
    div.topright{
    display:block;

    /*set the div in the top right corner*/
    position:absolute;
    top:auto inherit;
    right:auto;
    width:660px;
    
    /*give it some background and border*/

    border:1px solid #ddd;
  }
  div.container
  {
      margin:auto;
    }
    
        div.consulta{
    display:block;

    /*set the div in the top right corner*/
    position:absolute;
    top:auto ;
    right:auto;
    width:600px;
    
    /*give it some background and border*/

    border:1px solid #ddd;
  }
  </style>

</head>
<body>


<div id="container" class="clearfix">

  <div id="content" class="defaults">

    <h2>Gallery</h2>

        <!-- big image -->
        <div id="img" class="animated"><img src="../Images/logo.png" alt="image"></div>

        <!-- item container -->
        <ul id="thumbs" class="clearfix">

        </ul>

        <!-- navigation holder -->
        <div class="holder"></div>

        <!-- custom buttons -->
        <div id="btns">
            <span class="prev"></span>
            <span class="next"></span>
        </div>

  </div> <!--! end of #content -->
</div> <!--! end of #container -->
<br />
<div  class="topright" >
<div id="detalles"> 


</div>

<div  class= "consulta" id="Consulta">
     <label for="correo">Correo(*):</label>
     <br />
     <br />
     &nbsp;&nbsp;<input id="Text1" type="text" /> 
     <br />
     <br />
     <label for="consulta">Consulta:</label>
     <br />
     <br />
     &nbsp;&nbsp;<textarea id="TextArea1" cols="100" rows="2" maxlength=250></textarea>
     <br />
     <br />
     &nbsp;&nbsp;<input id="Submit1" type="submit" value="Enviar Consulta" onclick="validarConsulta()" />
</div>
</div>
<br />
<br />
 
</body>
</html>
</asp:Content>
